<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        *, ul, li, a {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .jq_banner {
            position: relative;
            width: 600px;
            height: 280px;
            margin: 50px 0 0 50px;
            box-sizing: border-box;
            border: 1px solid #d6cd84;
        }

        .jq_banner > .ul_banner {
            width: 100%;
            height: 100%;
            overflow: hidden;
            content: '';
            display: block;
            /*visibility: hidden;*/
            clear: both;
            /*background: #f06060;*/
        }

        .jq_banner > .ul_banner > li {
            float: left;
            width: 100%;
            height: 100%;
        }

        .jq_banner > .ul_banner > li > a {
            width: 100%;
            height: 100%;
        }

        .jq_banner > .ul_banner > li > a > img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .jq_banner > ul:last-of-type {
            position: absolute;
            width: 300px;
            height: 30px;
            /*border: 1px solid #000000;*/
            bottom: 10px;
            left: 150px;
        }

        .jq_banner > ul:last-of-type > li {
            float: left;
            border-radius: 5px;
            border: 1px solid #ffc91d;
            margin: 10px 0 0 40px;
            width: 10px;
            height: 10px;
        }

        .jq_banner > ul:last-of-type > .now {
            background: rgba(240, 161, 140, 0.77);
        }
    </style>
    <script src="../../../jquery-js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {

        });
    </script>
</head>
<body>
<div class="jq_banner">
    <ul class="ul_banner">
        <li><a href=""><img src="./img/sfq_1.jpg" alt=""></a></li>
        <li><a href=""><img src="./img/sfq_2.jpg" alt=""></a></li>
        <li><a href=""><img src="./img/sfq_3.jpg" alt=""></a></li>
        <li><a href=""><img src="./img/sfq_4.jpg" alt=""></a></li>
        <li><a href=""><img src="./img/sfq_5.jpg" alt=""></a></li>
    </ul>
    <ul>
        <li class="now"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>